<template>
<div class="container">
    <h1 class="title">请开始修改bug信息</h1>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <!-- <el-form-item  class="upload">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/"
            :show-file-list="true"
            :before-upload="beforeAvatarUpload">
            <img v-for="(item, index) in images" :key="index" :src="item.imgUrl" class="avatar" style="display:inline-block">
            <el-button class="btn avatar-uploader-icon" >上传截图</el-button>
          </el-upload>
          <el-button @click="submitUpload" class="sub-btn" type="primary">
            提交bug截图
          </el-button>
        </el-form-item> -->
        <el-form-item label="bug名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="bug描述" prop="desc">
            <el-input type="textarea" v-model="ruleForm.desc" rows="10"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="transBug">更新bug信息</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" @click="back" class="btn-back">
        返回
    </el-button>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
const ERR_OK = 1
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        desc: ''
      },
      rules: {
        name: [{ required: true, message: '请输入bug名称', trigger: 'blur' }],
        desc: [{ required: true, message: '请填写bug描述', trigger: 'blur' }]
      },
      options: [],
      value: '',
      user_name: '',
      user_id: 0,
      status: '',
      suid: '',
      images: []
    }
  },
  props: {
    bug_id: {
      type: Number,
      default: 0
    },
    bugs_suid: {
      type: Number,
      default: 0
    },
    bugs_status: {
      type: Number,
      default: 0
    }
  },
  created() {
    let msg = localStorage.getItem('loginMsg')
    this.suid = localStorage.getItem('bugs_suid')
    this.user_id = JSON.parse(msg).huser_id
    this.user_name = JSON.parse(msg).huser_name
    let id = this.$route.params.uid
    this.idArr = id.split('/')
  },
  methods: {
    //截图提交函数组
    //提交截图函数族
    beforeAvatarUpload(file) {
      if (!this.images) {
        this.$notify({
          title: '提示',
          message: '请先添加bug截图！',
          position: 'top-left'
        })
        return false
      }
      let that = this
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2
      let ret = {}
      ret['name'] = file.name
      // var reader = new FileReader();
      // reader.readAsDataURL(file);
      // reader.onload = function () {
      //   //读取完成后，数据保存在对象的result属性中
      //   ret["imgUrl"] = this.result;
      // };
      this.asyncUrl(file).then(res => {
        ret['imgUrl'] = res
      })
      this.images.push(ret)
      console.log(this.images)
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return false
    },
    asyncUrl(file) {
      return new Promise((resolve, reject) => {
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => resolve(this.result)
      })
    },
    submitUpload() {
      const url = 'api/bugs/uploadPic.html'
      this.images.forEach((val, index) => {
        console.log(val)
        const bugData = {
          pic_name: val.name,
          pic: val.imageUrl,
          bugs_id: this.idArr[0]
        }
        console.log(bugData)
        axios
          .post(url, bugData)
          .then(res => {
            if (res.data.code === ERR_OK) {
              console.log(res)
              this.$notify({
                title: '提示',
                message: '上传bug截图成功',
                position: 'top-left'
              })
            }
          })
          .catch(e => {
            console.log(e)
          })
      })
    },
    //表单提交函数组
    back() {
      this.$router.back()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    transBug() {
      const url = 'api/bugs/bugsEdit.html'
      const bugData = {
        bugs_uuid: this.user_id, //bug编辑人的id
        bugs_pid: 1,
        bugs_title: this.ruleForm.name,
        bugs_description: this.ruleForm.desc,
        bugs_content: '1212111',
        bugs_uname: this.user_name,
        //外传数据
        bugs_status: this.idArr[1],
        bugs_suid: this.suid,
        bugs_id: this.idArr[0] //bug的id
      }
      console.log(bugData)
      axios
        .post(url, bugData)
        .then(res => {
          if (res.data.code === ERR_OK) {
            this.$router.push('/bugs')
            this.$notify({
              title: '提示',
              message: res.data.msg,
              position: 'top-left',
              type: 'success'
            })
          } else {
            this.$notify({
              title: '提示',
              message: res.data.msg,
              position: 'top-left',
              type: 'error'
            })
          }
        })
        .catch(e => {
          console.log(e)
        })
    }
  },
  computed: {
    ...mapGetters(['person'])
  }
}
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">
.container
    width 600px
    margin 0 auto
    padding 60px
    .title
        letter-spacing 5px
    .demo-ruleForm
        .upload
            text-align left
            .avatar-uploader
                width 100%
                // height 500px
                margin-bottom 20px
                .el-upload
                    border 1px dashed #d9d9d9
                    border-radius 6px
                    cursor pointer
                    position relative
                    overflow hidden
                    width 200px
                    height 200px
                    display flex
                    justify-content center
                    .avatar-uploader-icon
                        position fixed
                        top 330px
                        left 250px
                        text-align center
                    .avatar
                        width 178px
                        height 178px
                        display block
                        flex 1
                        margin 10px
                        border-radius 10px
                        border 1px solid black
                .sub-btn
                    margin-top 20px
    .btn-back
        position absolute
        left 30px
        top 80px
</style>
